<template>
  <div class="detail">
    <!-- 导航栏 -->
    <van-nav-bar
      fixed
      left-arrow
      @click-left="$router.back()"
      title="文章详情"
    ></van-nav-bar>

    <!--loading-->
    <div class="loading" v-if="true">
      <van-loading class="inner" type="spinner" color="#1989fa" />
    </div>

    <!-- 文章详情 -->
    <div class="detail" v-else>
      <h3 class="title">标题</h3>
      <div class="author">
        <van-image round width="1rem" height="1rem" fit="fill" />
        <div class="text">
          <p class="name">作者</p>
          <p class="time">4天前</p>
        </div>
        <van-button round size="small" type="info">+ 关注</van-button>
      </div>
      <div class="content">
        <div>正文</div>
      </div>

      <!--分割线-->
      <van-divider>END</van-divider>

      <!--按钮-->
      <div class="btns">
        <van-button
          round
          size="small"
          hairline
          type="primary"
          plain
          icon="good-job-o"
        >
          点赞
        </van-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <van-button
          round
          size="small"
          hairline
          type="danger"
          plain
          icon="delete-o"
        >
          不喜欢
        </van-button>
      </div>
    </div>
  </div>
</template>
